<template>
 <div id="app1">
 <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

   
      <el-pagination class="fy"
                     layout="prev, pager, next"
                     @current-change="handleCurrentChangeExp"
                     :total="total"
                     background
                    >
                  </el-pagination>
  </div>

  
  
</template>

<script>
import axios from 'axios'
export default {
     data() {
        return {
          tableData: [],
          total:2001,//默认数据总数
            pagesize:20,//每页的数据条数
            currentPage:1,//默认开始页面
        }
      },
      methods:{
          // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChangeExp: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页

                  let urlHost = process.env.API_HOST 
        alert(urlHost)
        var url=urlHost+"getUsers"
        axios.get(url,{params:{currentPage:this.currentPage,pageSize:this.pageSize}}).then(res=>{
          console.log("res",res.data)
          this.tableData=res.data
        }).catch(err=>console.error(err))
        }
      },
      mounted(){
           let urlHost = process.env.API_HOST 
        alert(urlHost)
        var url=urlHost+"getUsers"
        axios.get(url,{params:{pageNo:this.pageNo,pageSize:this.pageSize}}).then(res=>{
          console.log("res",res.data)
          this.tableData=res.data
        }).catch(err=>console.error(err))
      }
    }
</script>

<style>


</style>



